<template>
  <div class="pay-methods" v-if="show">
    <div class="content">
      <div class="pupop-title">
        支付方式
        <div class="close" @click="$emit('update:show', false)">╳</div>
      </div>
      <div class="list-items" style="margin-top: 0">
        <div class="list-item"
             @click="select(1)">
          <div class="item-content">
            <div class="icon" style="width: 20px;height: 20px">
              <img style="width: 20px;height: 20px" :src="require('@assets/wxpay.png')">
            </div>
            <div class="title" style="margin-left: 5px">微信支付</div>
          </div>
        </div>
        <!--<div class="list-item"-->
             <!--@click="select(2)">-->
          <!--<div class="item-content">-->
            <!--<div class="icon" style="width: 20px;height: 20px">-->
              <!--<img style="width: 20px;height: 20px" :src="require('@assets/alipay.png')">-->
            <!--</div>-->
            <!--<div class="title" style="margin-left: 5px">支付宝支付</div>-->
          <!--</div>-->
        <!--</div>-->
        <div class="list-item"
             @click="select(3)">
          <div class="item-content">
            <div class="icon" style="width: 20px;height: 20px">
              <img style="width: 20px;height: 20px" :src="require('@assets/enjoychina.png')">
            </div>
            <div class="title" style="margin-left: 5px">欢乐余额支付</div>
            <div class="notice danger" v-if="userInfo.balance >= payMoney">￥{{(Number(userInfo.balance) / 100).toFixed(2)}}</div>
            <div class="notice" v-else>
              ￥{{(Number(userInfo.balance) / 100).toFixed(2)}}
              余额不足
            </div>
            <div
              class="recharge"
              @click.self="$emit('recharge')"
              v-if="userInfo.balance < payMoney">充值</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  props: {
    payMoney: {
      type: Number,
      default: 0
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.$store.dispatch('getUserInfo')
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    select (val) {
      if (val === 3 && this.userInfo.balance < this.payMoney) {
      } else {
        this.$emit('update:show', false)
        this.$emit('pay', val)
      }
    }
  }
}
</script>
<style scoped lang="sass">
  .pay-methods
    width: 100%
    height: 100%
    top: 0
    left: 0
    position: fixed
    background-color: rgba(0,0,0,0.8)
    z-index: 100
    display: flex
    align-items: center
    justify-content: center
    .content
      width: calc(100% - 20px)
      height: 180px
      .pupop-title
        width: 100%
        height: 45px
        display: flex
        align-items: center
        justify-content: center
        font-size: 1rem
        border-bottom: 1px solid #f4f4f4
        position: relative
        border-top-left-radius: 3px
        border-top-right-radius: 3px
        background-color: #f4f4f4
        .close
          width: 45px
          height: 45px
          position: absolute
          top: 0
          right: 0
          display: flex
          align-items: center
          justify-content: center
          font-size: .8rem
          &:active
            background-color: #f4f4f4
      .pay-selected
        color: #ff4700
      .recharge
        padding: 0 .5rem
        color: #ffffff
        height: 1.6rem
        background-color: #ff4700
        display: flex
        align-items: center
        justify-content: center
        font-size: .8rem
        border-radius: 3px
      .list-item
        height: 45px
</style>
